<style lang=less>
	@import '../../assets/public.less';
	@import './frenchOrder.less';
</style>
<template lang="html">
	<section class="frenchOrder">
		<div class="frenchOrder_mian" style="height: 650px;">
			<div class="frenchOrder_header_text">{{$t("frenchorder.title[0]")}}</div>
			<div class="frenchcurrency_header">
				<h2 class="order_hao">{{$t("frenchorder.title[1]")}}：{{order.order_num}}</h2>
				<h1 class="order_tishi" v-if="order.type == '1'">{{$t("frenchorder.direction[0]")}}
					<span v-if="order.oop_name">{{order.oop_name}}</span>
					<span v-else="order.oop_mobile">{{order.oop_mobile}}</span>
					<!--出售-->
					{{$t("frenchorder.direction[1]")}}{{order.total_num}}USDT
				</h1>
				<h1 class="order_tishi" v-else>{{$t("frenchorder.direction[0]")}}
					<span v-if="order.oop_name">{{order.oop_name}}</span>
					<span v-else="order.oop_mobile">{{order.oop_mobile}}</span>
					{{$t("frenchorder.direction[2]")}}{{order.total_num}}USDT
				</h1>
				<h3 class="order_dan">{{$t("frenchorder.title[2]")}}:{{order.price}}CNY/USDT</h3>
				<h4 class="order_zong">{{$t("frenchorder.title[3]")}}:<span>{{order.total_price}}CNY</span></h4>
				<!--<h4 class="order_zong" v-show="order.notes">备注: {{order.notes}}</h4>-->				
			</div>
			<ul class="Payment_method">
				<li class="" v-for='item in order.pay_list'>
					<i class="iconfont icon-weixin" v-if='item.type == "wx"'></i>
					<i class="iconfont icon-zhifubao" v-else-if='item.type == "alipay"'></i>
					<i class="iconfont icon-yinhangka" v-else-if='item.type == "backcard"'></i>
					<span>{{item.tip}}</span>
					<p>{{item.name}}</p>
					<p>{{item.number}}</p>
					<p>{{item.bank}}</p>
					<p>{{item.branch}}</p>
					<el-popover placement="right" width="220" trigger="hover" v-if='item.img'>
						<img :src="item.img" width="220">
						<i slot="reference" class="iconfont icon-erweima"></i>
					</el-popover>
				</li>
			</ul>
			<!-- 出售订单 -->
			<div class="Payment_results" v-if="order.type == '1'">
				<!--等待对方支付-->
				<h1 class="results_header" v-if="order.status=='1'">{{$t("frenchorder.time[0]")}}，{{order.oop_name}} {{$t("frenchorder.time[1]")}} <span class="time">{{countdowntime}}</span><span>{{$t("frenchorder.time[2]")}},{{$t("frenchorder.time[3]")}}:({{order.refer}})</span></h1>

				<div class="results_main" v-if="order.status=='1'">
					<div class="results_btn one">{{$t("frenchorder.time[4]")}}</div>
					<!--<div class="results_text">
						<i class="el-icon-warning"></i> 付款成功后,请点击按钮告知对方
					</div>-->
				</div>
				<!--对方已支付,付款参考号-->
				<h1 class="results_header" v-if="order.status=='2'">{{$t("frenchorder.todoSell[0]")}}:({{order.refer}})</h1>
				<div class="results_main" v-if="order.status=='2'">
					<div class="results_btn one" @click="YesGet()">{{$t("frenchorder.todoSell[1]")}}</div>
					<span class="payTime">{{payTime}}</span>
				</div>
				<!--已完成,订单参考号-->
				<h1 class="results_header" v-if="order.status=='3'">{{$t("frenchorder.todoSell[2]")}}:({{order.refer}})</h1>
				<div class="results_main" v-if="order.status=='3'">
					<div class="falr">
						<i class="el-icon-success"></i>
					</div>
					<!--<span class="ok">开始交易吧！</span>-->
				</div>
				<!--付款参考号-->
				<h1 class="results_header" v-if="order.status=='4'">{{$t("frenchorder.todoSell[3]")}}：{{order.command}},{{$t("frenchorder.todoSell[4]")}}:({{order.refer}})</h1>
				<div class="results_main" v-if="order.status=='4'">
					<div class="there">
						<i class="el-icon-warning"></i>
					</div>
				</div>
				<div class="results_main" v-else-if="order.status=='5'">
					<div class="results_btn">{{$t("frenchorder.cancel[0]")}}</div>
					<div class="results_text">
						<i class="el-icon-warning"></i> {{$t("frenchorder.cancel[1]")}}
					</div>
				</div>
			</div>
			<!-- 购买订单 -->
			<div class="Payment_results" v-else>
				<h1 class="results_header" v-if="order.status=='1'">{{$t("frenchorder.todoBuy[0]")}}  <span class="time">{{countdowntime}}</span><span>{{$t("frenchorder.todoBuy[1]")}} {{order.oop_name}}{{$t("frenchorder.todoBuy[2]")}} {{order.num}},{{$t("frenchorder.todoBuy[3]")}} :({{order.refer}})</span></h1>
				<div class="results_main" v-if="order.status=='1'">
					<div class="results_btn one" @click="signorder()">{{$t("frenchorder.todoBuy[4]")}} </div>
					<div class="results_text">
						<i class="el-icon-warning"></i> {{$t("frenchorder.todoBuy[5]")}} 
					</div>
				</div>
				<h1 class="results_header" v-if="order.status=='2'">{{$t("frenchorder.todoBuy[6]")}} :({{order.refer}})</h1>
				<div class="results_main" v-if="order.status=='2'">
					<!--<div class="results_btn one" @click="YesGet()">等待对方放币</div>-->
					<div class="results_btn two">{{$t("frenchorder.todoBuy[7]")}} </div>
					<span class="payTime">{{payTime}}</span>
				</div>
				<h1 class="results_header" v-if="order.status=='3'">{{$t("frenchorder.todoBuy[8]")}} :({{order.refer}})</h1>
				<div class="results_main" v-if="order.status=='3'">
					<div class="falr">
						<i class="el-icon-success"></i>
					</div>
					<!--<span class="ok">开始交易吧！</span>-->
				</div>
				<h1 class="results_header" v-if="order.status=='4'">{{$t("frenchorder.complaint[0]")}}：{{order.command}},{{$t("frenchorder.complaint[1]")}}:({{order.refer}})</h1>
				<div class="results_main" v-if="order.status=='4'">
					<div class="there">
						<i class="el-icon-warning"></i>
					</div>
				</div>
				<div class="results_main" v-else-if="order.status=='5'">
					<div class="results_btn">{{$t("frenchorder.complaint[2]")}}</div>
					<div class="results_text">
						<i class="el-icon-warning"></i> {{$t("frenchorder.complaint[3]")}}
					</div>
				</div>
			</div>
			<ul class="Agreement_mian">
				<li v-for="item in Agreement" v-show="order.type==2">{{item.text}}</li>
				<li v-for="item in Agreement2" v-show="order.type== 1">{{item.text}}</li>

			</ul>
			<div class="Cancellation">
				<span @click="Cancellation()" v-show="order.status == 1">{{$t("frenchorder.complaint[4]")}}</span>
				<span @click="Submissioncomplaint()" v-show="Number(order.status) == 2 &&  order.type == '1' ">{{$t("frenchorder.complaint[5]")}}</span> 
			</div>
		</div>
		<!-- 弹出框 -->
		<el-dialog :title="$t('frenchorder.mob1[0]')" width="30%" :visible.sync="dialogTableVisible">
			<div>
				<el-form ref="form" :model="form" label-width="80px">
					<el-form-item :label="$t('frenchorder.mob1[1]')">
						<el-select v-model="form.ss_type" :placeholder="$t('frenchorder.mob1[2]')">
							<!--<el-option label="对方未放行" value="对方未放行"></el-option>-->
							<el-option label="买家已确认,未打款" :value="$t('frenchorder.mob1[3]')"></el-option>
							<el-option label="其他" :value="$t('frenchorder.mob1[4]')"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('frenchorder.mob1[5]')">
						<el-input type="textarea" v-model="form.ss_reason"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogTableVisible = false">{{$t('frenchorder.mob1[6]')}}</el-button>
				<el-button type="primary" @click="Submission()">{{$t('frenchorder.mob1[7]')}}</el-button>
			</div>
		</el-dialog>
		<!--交易弹窗-->
		<div tabindex="-1" role="dialog" aria-modal="true" :aria-label="$t('frenchorder.mob2[0]')" class="el-message-box__wrapper" style="z-index: 2088;" v-show="shows">
			<div class="el-message-box">
				<div class="el-message-box__header">
					<div class="el-message-box__title">
						<span>{{$t('frenchorder.mob2[0]')}}</span>
					</div>
					<button type="button" aria-label="Close" class="el-message-box__headerbtn"  @click="shows = false">
						<i class="el-message-box__close el-icon-close" @click="shows = false"></i>
					</button>
				</div>
				<div class="el-message-box__content">
					<!---->
					<div class="el-message-box__message">
						<p>{{$t('frenchorder.mob2[1]')}}</p>
					</div>
					<div class="el-message-box__input" style="">
						<div class="el-input">
							<input type="password" autocomplete="off" placeholder="" class="el-input__inner" v-model="tpwd">
						</div>
						<div class="el-message-box__errormsg" style="visibility: hidden;"></div>
					</div>
				</div>
				<div class="el-message-box__btns"><button type="button" class="el-button el-button--default el-button--small" @click="shows = false">
					<span>{{$t('frenchorder.mob2[2]')}}</span>
				</button>
					<button type="button" class="el-button el-button--default el-button--small el-button--primary " @click="overOrder()">
					<span> {{$t('frenchorder.mob2[3]')}}</span>
				</button>
				</div>
			</div>
		</div>
		<div class="v-modal" tabindex="0" style="z-index: 200;" v-show="shows"></div>

	</section>
</template>
<script>
	export default {
		data() {
			return {  
				Agreement: this.$t('frenchorder.Agreement'),
				Agreement2: this.$t('frenchorder.Agreement2'),
				order: {},
				TimeData: null,
				countdown: null,
				countdowntime: null,
				qr_time: null, //确认支付倒计时
				payTime: null, //渲染到页面的倒计时
				setIntervaltime: null,
				dialogTableVisible: false,
				shows: false,
				tpwd: '', //资金密码
				form: {
					ss_type: "买家已确认,未打款",
					ss_reason: "",
				},
				set: null, //交易倒计时定时器
				payedSet: null, //待放行倒计时
			}
		},
		methods: {
			// 取消订单
			Cancellation() {
				var connet = this;
				connet.$confirm(connet.$t('frenchorder.jsmob1[0]'), connet.$t('frenchorder.jsmob1[1]'), {
					confirmButtonText: connet.$t('frenchorder.jsmob1[2]'),
					cancelButtonText: connet.$t('frenchorder.jsmob1[3]'),
					type: 'warning'
				}).then(() => {
					if(connet.order.status != 1){
						connet.$public.msg(connet.$t('frenchorder.jsmob1[4]'), 'warning', connet);
						return false
					}					
					connet.Cancellationdata();
				}).catch(() => {
					connet.$message({
						type: 'info',
						message: connet.$t('frenchorder.jsmob1[5]')
					});
				});
			},
			// 取消订单数据
			Cancellationdata() {
				var connet = this;
				var re_order = {
					order_num: connet.order.order_num,
				};
				connet.$http.post(connet.$http.re_order, re_order).then(function(response) {
					if(response.data.status == "0") {
//						connet.huqushuju();
						connet.getDataSet();
						connet.$message({
							type: 'success',
							message: connet.$t('frenchorder.jsmob1[6]')
						});
						connet.$router.push({
							path: '/frenchcurrency'
						});
					} else {
						connet.$message({
							type: 'info',
							type: 'success',
							message: response.data.msg
						});
					}
				}).catch(function(error) {});
			},
			// 获取订单信息
			huqushuju() {
				var connet = this;
				var hu = JSON.parse(unescape(window.sessionStorage.order));
				connet.CountDown(hu.data.order_num);
			},
			// 标记已付款
			signorder() {
				var connet = this;
				connet.$confirm(connet.$t('frenchorder.jsmob2[0]') + '<span style="color:red">'+connet.$t('frenchorder.jsmob2[1]')+'</span>', connet.$t('frenchorder.jsmob2[2]'), {
					confirmButtonText: connet.$t('frenchorder.jsmob1[2]'),
					cancelButtonText: connet.$t('frenchorder.jsmob1[3]'),
					type: 'warning',
					dangerouslyUseHTMLString: true,
				}).then(() => {
					var setOrderStatus = {
						order_no: connet.order.order_num,
					}
					connet.$http.post(connet.$http.setOrderStatus, setOrderStatus).then(function(response) {
						if(response.data.status == "200") {
							connet.getDataSet();
							connet.$message({
								type: 'success',
								message: connet.$t('frenchorder.jsmob2[3]'),
							});
						} else {
							connet.$message({
								type: 'info',
								message: response.data.msg
							});
						}
					}).catch(function(error) {});

				}).catch(() => {
					connet.$message({
						type: 'info',
						message: connet.$t('frenchorder.jsmob1[5]'),
					});
				});
			},
			// 倒计时（刷新数据接口）
			CountDown(order_num) {
				var connet = this;
				connet.order_order_num = order_num; //订单号
				var myData = new Date();
//				clearInterval(connet.setIntervaltime);
				connet.getDataSet();				
				connet.setIntervaltime = window.setInterval(function() {
					connet.getDataSet();					
				}, 5000)

			},
			//请求数据接口

			getDataSet() {
				var connet = this;
				var orderDetaildata = {
					order_num: connet.order_order_num,
				};
				connet.$http.post(connet.$http.orderDetail, orderDetaildata).then(function(response) {
					if(response.data.status == "200") {
						connet.order = response.data.data;
						connet.TimeData = response.data.data.add_time;
						connet.countdown = response.data.data.down_time; //订单倒计时
						connet.qr_time = response.data.data.qr_time; //确定支付倒计时
						//						status = response.data.data.status;						
						connet.chusouSet(response.data.data.status, response.data.data.down_time);
						//状态是2 定时器走起来
						if(response.data.data.status == 2) {
							connet.payed()
						} else {
							//当是这个状态时 把这个定时器干掉
							clearInterval(connet.payedSet);
						}
					}
				}).catch(function(error) {});
			},
			//待出售倒计时
			chusouSet(status, time) {
				//需要两个参数（此时订单的状态，当前剩余时间）
				//倒计时 执行函数
				var connet = this;
				var shijian;
				connet.set = window.setInterval(function() {
					switch(status) {
						case "1":
							shijian = time / 60;
							connet.countdowntime = (parseInt(shijian)) + connet.$t('frenchorder.jsmob3[0]') + (time % 60) + connet.$t('frenchorder.jsmob3[1]');
							break;
						case "2":
							break;
						default:
							window.clearInterval(connet.setIntervaltime);
							break;
					}
					time = time <= 0 ? 0 : --time;
					if(time == 0) {
						connet.countdowntime = connet.$t('frenchorder.jsmob2[4]');
						clearInterval(connet.set);
					}

				}, 1000)
			},
			//待支付倒计时
			payed() {
				var _this = this;
				//关闭交易倒计时 执行这个倒计时时说明交易倒计时已不存在
				window.clearInterval(_this.set);				
				//为了防止意外多起定时器 先把自己给干掉
				window.clearInterval(_this.payedSet);
				_this.payedSet = setInterval(function() {					
					var shi = _this.qr_time / 60;
					_this.payTime = (parseInt(shi)) + _this.$t('frenchorder.jsmob3[0]') + (_this.qr_time % 60) + _this.$t('frenchorder.jsmob3[2]');
					_this.qr_time--;
					if(_this.qr_time < 0) {
						_this.qr_time = 0;
						_this.payTime = _this.$t('frenchorder.jsmob2[4]');
						clearInterval(_this.payedSet);
					}
				}, 1000)

			},
			//结束订单
			overOrder() {
				var _this = this;
				if(!_this.$public.pwd(_this.tpwd)) {
					_this.$public.msg(_this.$t('frenchorder.jsmob3[3]'), 'warning', _this);
					return false;
				}
				//请求接口
				_this.$http.post(_this.$http.confirm, {
					order_no: _this.order.order_num,
					tpwd: _this.tpwd
				}).then(function(response) {
					if(response.data.status == "200") {
						_this.getDataSet();
						_this.$public.msg(response.data.msg, 'success', _this);
						_this.shows = false;
					} else {
						_this.$public.msg(response.data.msg, 'warning', _this);
					}
				}).catch(function(error) {});

			},
			//对方已付款请确认放币 点击事件
			YesGet() {
				var _this = this;
				_this.tpwd = '';
				_this.shows = true;
			},
			// 申诉点击弹框
			Submissioncomplaint() {
				var connet = this;
				connet.form.ss_reason = '';
				connet.dialogTableVisible = true;

			},
			// 申诉提交
			Submission() {
				var connet = this;
				var ss_reason = connet.form.ss_reason.replace(/\s/g, "");
				if(!ss_reason) {
					connet.$public.msg(connet.$t('frenchorder.jsmob3[4]'), 'warning', connet);
					return false;
				}
				connet.dialogTableVisible = false;
				var post_allege = {
					order_num: connet.order.order_num,
					refer: connet.order.refer,
					ss_type: connet.form.ss_type,
					ss_reason: connet.form.ss_reason,
					shop_account: connet.order.oop_account,
					status:connet.order.status
				};
				connet.$http.post(connet.$http.post_allege, post_allege).then(function(response) {
					if(response.data.status == "200") {
						connet.getDataSet();
						connet.$message({
							type: 'success',
							message: connet.$t('frenchorder.jsmob3[5]')
						});
					} else {
						connet.$message({
							type: 'info',
							message: response.data.msg
						});
					}
				}).catch(function(error) {});
			},
			//干掉定时器
			offTime() {
				var connet = this;
				clearInterval(connet.setIntervaltime);
				clearInterval(connet.set);
				clearInterval(connet.payedSet);
			}
		},
		// 路由改变时
		beforeRouteLeave(to, from, next) {
			next()
		},
		created: function() {
			var connet = this;
			connet.huqushuju();
		}

	}
</script>